<!--
- Author:   .
- Date:    2017/3/4.
- File:    更新组件.
-->
<template>
  <div class="update" v-show="show">
    下载中
    <mt-progress :value="appDownPersent" :bar-height="10">
      <div slot="start"></div>
      <div slot="end">&nbsp;{{appDownPersent.toFixed(2)}}%</div>
    </mt-progress>
  </div>
</template>

<script>
  import {Progress} from 'mint-ui'
  import config from '../../config'
  export default{
    data() {
      return {
        show: false,
        appDownPersent: 0
      }
    },
    components: {
      'mt-progress': Progress
    },
    watch: {
      show: function (val) {
        if (val) {
          let throttleDownProgress = this.$utils.throttle2(this.downProgress, 50)
          this.$native.updateApp(config.appDownUrl, this.downSuccess, throttleDownProgress)
        }
      }
    },
    created() {
    },
    methods: {
      downProgress(downloadSize, totalSize) {
        this.appDownPersent = downloadSize / totalSize * 100
        console.debug('下载进度', downloadSize / totalSize * 100)
      },
      downSuccess(task) {
        this.appDownPersent = 100
        this.show = false
      }
    }
  }
</script>

<style>
  .update {
    position: absolute;
    z-index: 9999;
    text-align: center;
    width: 300px;
    height: 80px;
    left: 50%;
    top: 40%;
    margin-left: -150px;
    margin-top: -30px;
    padding: 15px;
    /*border: 1px solid #e0e0e0;*/
    border-radius: 5px;
    color: #999999;
    background: white;
    -webkit-box-shadow: 2px 2px 5px #8A8A8A;
    box-shadow: 2px 2px 5px #8A8A8A;
  }
</style>
